<template>
  <div ref="myChart" class="lineHeight" />
</template>

<script >
import * as echarts from 'echarts'
export default {
  name: 'FuctionLine',
  props: {
    actionData: {
      type: Object,
      required: true,
      default: () => ({})
    },
    labelColor: {
      type: String,
      default: '#bed4fe'
    }
  },

  data() {
    return {

    }
  },
  mounted() {
    this.chartRun()
  },
  methods: {
    chartRun() {
      const myChart = echarts.init(this.$refs.myChart)
      window.addEventListener('resize', myChart.resize)

      const that = this

      var data = []
      var startTime = 0
      const echartsData = that.actionData.data
      // 这个数组为y轴行数
      var categories = that.actionData.categories
      // Generate mock data
      categories.forEach(function(category, index) {
        var baseTime = startTime
        for (var i = 0; i < echartsData.length; i++) {
          var typeItem = echartsData[i][0]
          var duration = echartsData[i][1]
          data.push({
            name: typeItem,
            value: [index, baseTime, (baseTime += 1) * duration, duration],
            itemStyle: {
              normal: {
                color: that.actionData.itemColor
              }
            }
          })
        }
      })

      const option = {
        grid: {
          left: 60,
          top: 0,
          right: 0,
          bottom: 0
        },
        xAxis: {
          show: false
        },
        yAxis: {
          data: categories,
          axisLabel: {
            color: that.labelColor
          },
          axisLine: {
            show: false
          }
        },
        series: [
          {
            type: 'custom',
            renderItem: function renderItem(params, api) {
              var categoryIndex = api.value(0)
              var start = api.coord([api.value(1), categoryIndex])
              var end = api.coord([api.value(2), categoryIndex])
              var height = api.size([0, 1])[1]
              var rectShape = echarts.graphic.clipRectByRect(
                {
                  x: start[0],
                  y: start[1] - height / 2,
                  width: end[0] - start[0],
                  height: height
                },
                {
                  x: params.coordSys.x,
                  y: params.coordSys.y,
                  width: params.coordSys.width,
                  height: params.coordSys.height
                }
              )

              return (
                rectShape && {
                  type: 'rect',
                  transition: ['shape'],
                  shape: rectShape,
                  style: api.style()
                }
              )
            },
            encode: {
              x: [1, 2],
              y: 0
            },
            data: data

          }
        ]

      }

      myChart.setOption(option)
    }
  }
}
</script>

